<!-- 提示信息 -->
<app-tip [type]="tipType"></app-tip>
<!-- 遮罩 -->
<app-load *ngIf="isLoading"></app-load>
<div class="header">
  <div class="left flex" [routerLink]="['/main/order/order-details']"  id="btn-back" [queryParams]="{tid: tid}">
    <div class="left-icon">
      <i class="fa fa-angle-left back-icon" aria-hidden="true"></i>
    </div>
    <div class="left-name">
      <span class="back-name">返回</span>
    </div>
  </div>
  <div class="center">退菜</div>
</div>
<div class="foot-list" style="margin-top: 70px;">
  <div style="font-size:1.2em;height: 2.5em;line-height: 2.5em;text-align:center;color: #ff3860;background-color: #fff0d5;box-shadow: 0 1px 2px 1px #fff0d5;border: 1px solid #f7ce8d59">
    <i class="fa fa-info-circle"></i> 你正在进行退菜操作
  </div>

  <div *ngIf="recallCount">

    <div class="title" style="background: #ea644a;color: #fff;">
      <span style="float: left;padding-left: 1.2em;">已退菜品</span>
      <span style="float: right;padding-right: 1.2em;"><span>x</span> {{recallCount}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥{{recallPrice | price}}</span>
    </div>
    <div *ngFor="let v of orderList">
      <div class="food-item1"  *ngIf="v.num != v.opNum">
        <div class="food-item1-top">
          <div class="left"><img src="{{v.figure_url}}?x-oss-process=image/resize,w_110,h_80" alt="" style="border-radius: 5px;"></div>
          <div class="center">
            <div class="title-name">{{v.food_name}}</div>
            <div class="num">数量：{{v.opNum == 0 ? v.num:v.num-v.opNum}}&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #dd514c">单价：￥{{v.price}}</span></div>
          </div>
          <div class="right" style="width: 8em;">
            <div class="price" style="position: relative"><span
              style="position: absolute;right: 10px;top:2.7em;color: #f39801;font-size: 1.1em;font-weight: 600">￥{{(v.opNum == 0 ? v.num:v.num-v.opNum) * v.price | price}}</span>
            </div>
          </div>
        </div>
        <div class="desc" *ngIf="v.practice"><span style="color: #666;">规格：</span>{{v.practice}}</div>
      </div>
    </div>
    <div style="padding: 0 1em 1em 1em;margin-top: 1em;">
      <div class="btn-submit" *ngIf="submitType" (click)="submitData()">提交</div>
    </div>
  </div>

  <div class="title" [ngClass]="{'selected': recallCount != 0}">
    <span style="float: left;padding-left: 1.2em;">已点菜品</span> <span
    style="float: right;padding-right: 1.2em;"><span>x</span> {{countNumber}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥{{countPrice | price}}</span>
  </div>

  <div class="food-item1" *ngFor="let v of orderList">
    <div class="food-item1-top">
      <div class="left"><img src="{{v.figure_url}}?x-oss-process=image/resize,w_110,h_80" alt=""></div>
      <div class="center">
        <div class="title-name">{{v.food_name}}</div>
        <div class="num">数量：{{v.num}}&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #dd514c">单价：￥{{v.price}}</span></div>
      </div>
      <div class="right" style="width: 8em;">
        <div class="price" style="position: relative"><span
          style="position: absolute;right: 10px;top:2.7em;color: #f39801;font-size: 1.1em;font-weight: 600">￥{{v.total_price | price}}</span>
          <p style="text-align: center">
            <i (click)="reduce(v)" class="fa fa-minus-circle" aria-hidden="true" style="font-size: 1.6em;color: #ddd;border: 3px solid transparent" [ngClass]="{'active': v.opNum != 0 && v.num >= v.opNum}"></i>&nbsp;
            <span style="position: relative;top: -4px;">{{v.opNum}}</span>
            &nbsp;<i (click)="add(v)" class="fa fa-plus-circle" aria-hidden="true" style="font-size: 1.6em;color: #ddd;border: 3px solid transparent" [ngClass]="{'active': v.num > v.opNum }"></i></p>
        </div>
      </div>
    </div>
    <div class="desc" *ngIf="v.practice"><span style="color: #666;">规格：</span>{{v.practice}}</div>
  </div>
</div>
